<template>
  <div class="boxheader">
    <div class="titbox">
      <img
        class="logoImg"
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e9b155438f840000019ae929d23e.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643348054&t=0f2fc8896446d79deac7f4195b3c480c"
        alt=""
      />
      <span class="tittext">按纲施训质效分析评估子系统</span>
    </div>
    <div class="nav">
      <span v-if="pathData != '/mainindex'">
        <span
          :class="{ active: activeIndex == index }"
          v-for="(item, index) in navList"
          :key="index"
          @click="navClick(item.type)"
        >
          {{ item.text }}
        </span>
      </span>
      <div class="profile">
        <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e9b155438f840000019ae929d23e.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643348054&t=0f2fc8896446d79deac7f4195b3c480c"
          alt=""
        />
        <i class="el-icon-caret-bottom" style="color: #fff"></i>
        <div class="outBox" @click="outClick">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "boxheader",
  data() {
    return {
      activeIndex: "2",
      navList: [
        {
          text: "首页",
          id: 0,
          type:true
        },
        {
          text: "按纲施训落实动态",
          id: 1,
          type:false
        },
        {
          text: "训练水平智能分析",
          id: 2,
          type:true
        },
        {
          text: "智能训练辅助决策",
          id: 3,
          type:false
        },
      ],
      pathData: "",
    };
  },
  watch: {
    "$route.path": {
      handler: function (val, oldVal) {
        this.pathData = val;
        console.log("路由变化", val);
      },
      // 深度观察监听
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    outClick() {
      sessionStorage.removeItem("loginType");
      this.$router.push("/login");
    },
    navClick(type) {
      if (!type) {
        const h = this.$createElement;
        this.$notify({
          title: "提示",
          message: h("i", { style: "color: teal" }, "您没有该模块权限"),
        });
      }
    },
  },
};
</script>

<style scoped>
.boxheader {
  height: 56px;
  line-height: 56px;
  background: #01575c;
  display: flex;
  padding: 0px 24px;
  position: relative;
}
.nav,
.titbox {
  height: 100%;
}
.titbox {
  /* background: pink; */
  position: relative;
}
.tittext {
  margin-left: 60px;
  color: #fff;
  font-size: 18px;
}
.logoImg {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  margin-top: -25px;
}
.nav {
  flex: 1;
  padding-left: 150px;
  position: relative;
  /* background: plum; */
}
.nav > span > span {
  display: inline-block;
  height: 56px;
  margin-right: 24px;
  font-size: 16px;
  color: #88bfba;
  box-sizing: border-box;
  cursor: pointer;
}
.nav > span > span:hover {
  color: #fff !important;
}
.active {
  color: #fff !important;
  /* border-bottom: 3px solid #d2d2d2; */
}
.profile {
  position: absolute;
  height: 56px;
  right: 0px;
  top: 50%;
  margin-top: -28px;
  vertical-align: middle;
}
.profile > img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
}
.profile:hover .outBox {
  display: block;
}
.outBox {
  display: none;
  position: absolute;
  right: -16px;
  top: 56px;
  background: #438800;
  height: 40px;
  line-height: 40px;
  width: 100px;
  text-align: center;
  color: #fff;
}
</style>
